<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>白石溪畔</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/JSindex.css">
    <script src="JS/common.js"></script>
    <script src="JS/index.js"></script>


</head>
<body>
<!--头部开始-->
<div class="nav-top">
    <div class="w">
        <div class="nav-top-l">
            <ul>
                <li><a href="#">小米商城</a></li>
                <li class="spacer"></li>
                <li><a href="#">MIUI</a></li>
                <li class="spacer"></li>
                <li><a href="#">IoT</a></li>
                <li class="spacer"></li>
                <li><a href="#">云服务</a></li>
                <li class="spacer"></li>
                <li><a href="#">金融</a></li>
                <li class="spacer"></li>
                <li><a href="#">有品</a></li>
                <li class="spacer"></li>
                <li><a href="#">小爱开放平台</a></li>
                <li class="spacer"></li>
                <li><a href="#">企业团购</a></li>
                <li class="spacer"></li>
                <li><a href="#">资质证照</a></li>
                <li class="spacer"></li>
                <li><a href="#">协议规则</a></li>
                <li class="spacer"></li>
                <li><a href="#">下载Aapp</a></li>
                <li class="spacer"></li>
                <li><a href="#">Select Region</a></li>
                <li class="spacer"></li>


            </ul>
        </div>
        <div class="nav-top-r">
            <div class="nav-top-r-l">
                <ul>
                    <li><a href="#">登录</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">注册</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">通知消息</a></li>
                </ul>
            </div>
            <div class="nav-top-r-r">
                <s> </s>
                <a href="#">购物车(0)</a>

            </div>

        </div>
    </div>
</div>

<div class="nav-bottom">
    <div class="w">
        <div class="nav-bottom-l">
            <h1>
                <a href="" title="小米官网">小米</a>
            </h1>
        </div>
        <div class="nav-bottom-c">
            <ul>
                <li><a href="#"> 小米手机</a></li>
                <li><a href="#"> Redmi红米</a></li>
                <li><a href="#"> 电视</a></li>
                <li><a href="#"> 笔记本</a></li>
                <li><a href="#"> 家电</a></li>
                <li><a href="#"> 路由器</a></li>
                <li><a href="#"> 智能硬件</a></li>
                <li><a href="#"> 服务</a></li>
                <li><a href="#"> 社区</a></li>

            </ul>
        </div>
        <div class="nav-bottom-r">
            <input type="text">
            <a href="" class="xiaomione">小米9</a>
            <a href="" class="xiaomitwo">小米9 SE</a>
            <button>
                <em> </em>
            </button>
        </div>
    </div>
</div>

<!--头部结束-->

<div class="center">
    <div class="center-first">
        <div class="w">
            <div class="center-top clearfix">
                <div class="center-left">
                    <ul>
                        <li class="center-left-one">
                            <a href="#">手机 电话卡<i> </i></a>
                            <div class="center-left-one-kk1">
                                <ol>
                                    <li>
                                        <img src="images/center-left-one-kk01.jpg">
                                        <h3>小米手机</h3>
                                    </li>
                                    <li>
                                        <img src="images/center-left-one-kk01.jpg">
                                        <h3>小米手机</h3>
                                    </li>
                                    <li>
                                        <img src="images/center-left-one-kk01.jpg">
                                        <h3>小米手机</h3>
                                    </li>
                                    <li>
                                        <img src="images/center-left-one-kk01.jpg">
                                        <h3>小米手机</h3>
                                    </li>
                                    <li>
                                        <img src="images/center-left-one-kk01.jpg">
                                        <h3>小米手机</h3>
                                    </li>
                                    <li>
                                        <img src="images/center-left-one-kk01.jpg">
                                        <h3>小米手机</h3>
                                    </li>




                                </ol>
                            </div>
                            <div class="center-left-one-kk2">
                                <ol>
                                    <li>
                                        <img src="images/center-left-one-kk01.jpg">
                                        <h3>小米手机</h3>
                                    </li>
                                    <li>
                                        <img src="images/center-left-one-kk01.jpg">
                                        <h3>小米手机</h3>
                                    </li>
                                    <li>
                                        <img src="images/center-left-one-kk01.jpg">
                                        <h3>小米手机</h3>
                                    </li>
                                    <li>
                                        <img src="images/center-left-one-kk01.jpg">
                                        <h3>小米手机</h3>
                                    </li>
                                    <li>
                                        <img src="images/center-left-one-kk01.jpg">
                                        <h3>小米手机</h3>
                                    </li>
                                    <li>
                                        <img src="images/center-left-one-kk01.jpg">
                                        <h3>小米手机</h3>
                                    </li>




                                </ol>
                            </div>
                        </li>
                        <li class="center-left-one">
                            <a href="#">电视 盒子<i> </i></a>
                        </li>

                        <li><a href="#">笔记本 平板<i> </i></a></li>
                        <li><a href="#">家电 插线板<i> </i></a></li>
                        <li><a href="#">出行 穿戴<i> </i></a></li>
                        <li><a href="#">智能 路由器<i> </i></a></li>
                        <li><a href="#">电源 配件<i> </i></a></li>
                        <li><a href="#">健康 儿童<i> </i></a></li>
                        <li><a href="#">耳机 音箱<i> </i></a></li>
                        <li><a href="#">生活 箱包<i> </i></a></li>
                    </ul>
                </div>
                <div class="center-right" id="box">
                    <div class="screen"><!--相框-->
                        <ul>
                            <li><img src="images/lbt1.jpg" width="992" height="460"/></li>
                            <li><img src="images/lbt2.jpg" width="992" height="460"/></li>
                            <li><img src="images/lbt3.jpg" width="992" height="460"/></li>
                            <li><img src="images/lbt4.jpg" width="992" height="460"/></li>
                            <li><img src="images/lbt5.jpg" width="992" height="460"/></li>
                        </ul>
                        <ol>
                        </ol>
                    </div>
                    <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
                </div>
                <script>


                    //获取最外面的div
                    var box = my$("box");
                    //获取相框
                    var screen = box.children[0];
                    //获取相框的宽度
                    var imgWidth = screen.offsetWidth;
                    //获取ul
                    var ulObj = screen.children[0];
                    //获取ul中的所有的li
                    var list = ulObj.children;
                    //获取ol
                    var olObj = screen.children[1];
                    //焦点的div
                    var arr = my$("arr");

                    //创建小按钮-----根据ul中的个数
                    var pic = 0;
                    for (var i = 0; i < list.length; i++) {
                        //创建li标签，加入到ol中;
                        var liObj = document.createElement("li");
                        olObj.appendChild(liObj);
                        //在每个ol中的li标签上添加一个自定义属性，存储索引值
                        liObj.setAttribute("index", i);
                        //鼠标进入事件
                        liObj.onmouseover = function () {
                            //先干掉所有ol中的li的背景颜色
                            for (var j = 0; j < olObj.children.length; j++) {
                                olObj.children[j].removeAttribute("class");
                            }
                            //当前鼠标进来的li标签颜色
                            this.className = "current";
                            //获取鼠标进入的li的当前所有值
                            pic = this.getAttribute("index");
                            //移动ul
                            animate(ulObj, -pic * imgWidth);
                        };
                    }
                    olObj.children[0].className = "current";
                    //先克隆一个ul中第一个li，加入到ul中的最后======克隆
                    ulObj.appendChild(list[0].cloneNode(true));

                    //自动播放

                    //鼠标进入到box的div显示左右焦点的div
                    box.onmouseover = function () {
                        arr.style.display = "block";
                        //鼠标进入废了之前的定时器
                        clearInterval(timeId)
                    };
                    //鼠标离开到box的div显示左右焦点的div
                    box.onmouseout = function () {
                        arr.style.display = "none";
                        //鼠标离开自动播放

                    };
                    // 右边按钮
                    my$("right").onclick = clickHandle;

                    function clickHandle() {
                        if (pic == list.length - 1) {
                            pic = 0;
                            ulObj.style.left = 0 + "px";
                        }
                        pic++;
                        animate(ulObj, -pic * imgWidth);
                        //如果pic==5，此时显示地6个图片（内容是第一张图片），第一个小按钮有颜色
                        if (pic == list.length - 1) {
                            olObj.children[olObj.children.length - 1].className = "";
                            olObj.children[0].className = "current";
                        } else {
                            for (var i = 0; i < olObj.children.length; i++) {
                                olObj.children[i].removeAttribute("class");
                            }
                            olObj.children[pic].className = "current";
                        }
                    };
                    my$("left").onclick = function () {
                        if (pic == 0) {
                            pic = 5;
                            ulObj.style.left = -pic * imgWidth + "px";
                        }
                        pic--;
                        animate(ulObj, -pic * imgWidth);
//设置小按钮的颜色------------所有的小按钮干掉颜色
                        for (var i = 0; i < olObj.children.length; i++) {
                            olObj.children[i].removeAttribute("class");
                        }
//当前点击小按钮对于的颜色
                        olObj.children[pic].className = "current";

                    };
                </script>
            </div>
            <div class="center-center clearfix">
                <div class="center-center-left">
                    <ul>
                        <li class="br bb"><a href=""><i> </i>手机购物</a></li>
                        <li class="br bb"><a href=""><i> </i>手机购物</a></li>
                        <li class="bb"><a href=""><i> </i>手机购物</a></li>
                        <li class="br"><a href=""><i> </i>手机购物</a></li>
                        <li class="br"><a href=""><i> </i>手机购物</a></li>
                        <li><a href=""><i> </i>手机购物</a></li>
                    </ul>
                </div>
                <div class="center-center-center-right">
                    <ul>
                        <li><a href="#"><img src="images/center-center1.jpg"></a></li>
                        <li><a href="#"><img src="images/center-center2.jpg"></a></li>
                        <li><a href="#"><img src="images/center-center3.jpg"></a></li>
                    </ul>
                </div>
            </div>
            <div class="center-bottom">
                <img src="images/center-buttom.jpg">
            </div>
        </div>
    </div>
    <div class="centerPhone w ">
        <div class="centerPhone-nav clearfix">
            <div class="centerPhone-nav-left">
                <h1>手机</h1>
            </div>
            <div class="centerPhone-nav-right">
                <a href="#">查看全部<i>&nbsp; </i></a>
            </div>
        </div>
        <div class="centerPhone-center clearfix">
            <div class="centerPhone-center-left">
                <img src="images/centerPhone-center-left.jpg">
            </div>
            <div class="centerPhone-center-right ">
                <ul>
                    <li>
                        <div class="centerPhone-pic">
                            <img src="images/pic1.jpg">
                        </div>
                        <h3>小米9 6GB+128GB</h3>
                        <p>骁龙855，索尼4800万超广角微距三摄</p>
                        <span>2799&nbsp;元</span>
                    </li>
                    <li>
                        <div class="centerPhone-pic">
                            <img src="images/pic2.jpg">
                        </div>
                        <h3>小米9 6GB+128GB</h3>
                        <p>骁龙855，索尼4800万超广角微距三摄</p>
                        <span>2799&nbsp;元</span>
                    </li>
                    <li>
                        <div class="centerPhone-pic">
                            <img src="images/pic3.jpg">
                        </div>
                        <h3>小米9 6GB+128GB</h3>
                        <p>骁龙855，索尼4800万超广角微距三摄</p>
                        <span>2799&nbsp;元</span>
                    </li>
                    <li>
                        <div class="centerPhone-pic">
                            <img src="images/pic4.png">
                        </div>
                        <h3>小米9 6GB+128GB</h3>
                        <p>骁龙855，索尼4800万超广角微距三摄</p>
                        <span>2799&nbsp;元</span>
                    </li>
                </ul>
            </div>
            <div class="centerPhone-center-right1 ">
                <ul>
                    <li>
                        <div class="centerPhone-pic">
                            <img src="images/pic5.png">
                        </div>
                        <h3>小米9 6GB+128GB</h3>
                        <p>骁龙855，索尼4800万超广角微距三摄</p>
                        <span>2799&nbsp;元</span>
                    </li>
                    <li>
                        <div class="centerPhone-pic">
                            <img src="images/pic6.jpg">
                        </div>
                        <h3>小米9 6GB+128GB</h3>
                        <p>骁龙855，索尼4800万超广角微距三摄</p>
                        <span>2799&nbsp;元</span>
                    </li>
                    <li>
                        <div class="centerPhone-pic">
                            <img src="images/pic7.jpg">
                        </div>
                        <h3>小米9 6GB+128GB</h3>
                        <p>骁龙855，索尼4800万超广角微距三摄</p>
                        <span>2799&nbsp;元</span>
                    </li>
                    <li>
                        <div class="centerPhone-pic">
                            <img src="images/pic8.jpg">
                        </div>
                        <h3>小米9 6GB+128GB</h3>
                        <p>骁龙855，索尼4800万超广角微距三摄</p>
                        <span>2799&nbsp;元</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="centerPhone-center-bottom">
            <img src="images/centerPhone-center-bottom.jpg">
        </div>


    </div>
    <div class="center-electrical w">
        <div class="center-electrical-top clearfix">
            <div class="center-electrical-left">
                <h1>家电</h1>
            </div>
            <div class="center-electrical-right">
                <a href="#">电脑</a>&nbsp;&nbsp;
                <a href="#">家具</a>&nbsp;&nbsp;
                <a href="#">电器</a>
            </div>
        </div>
        <div class="center-electrical-top-center clearfix">
            <div class="center-electrical-top-center-posleft">
                <div class="center-electrical-top-center-left-top">
                    <img src="images/center-electrical-top-center01.jpg">
                </div>
                <div class="center-electrical-top-center-left-buttom">
                    <img src="images/center-electrical-top-center02.jpg">
                </div>
            </div>
            <div class="center-electrical-top-center-posright">
                <div class="center-electrical-top-center-posright-top">
                    <ul>
                        <li>
                            <img src="images/center-electrical-top-center-right-top01.jpg">
                            <h3>小米电视4A 32英寸</h3>
                            <p>64位四核处理器 / 1GB+4GB大内存</p>
                            <span>499元</span>
                            <div class="current">
                                <h3>很满意，很开心，很幸福</h3>
                                <p>来自童童的评价</p>
                            </div>
                            <div class="newGood">
                                <h4>促销</h4>
                            </div>
                        </li>
                        <li>
                            <img src="images/center-electrical-top-center-right-top02.jpg">
                            <h3>小米电视4A 32英寸</h3>
                            <p>64位四核处理器 / 1GB+4GB大内存</p>
                            <span>499元</span>
                            <div class="current">
                                <h3>很满意，很开心，很幸福</h3>
                                <p>来自童童的评价</p>
                            </div>
                        </li>
                         <li>
                            <img src="images/center-electrical-top-center-right-top03.jpg">
                            <h3>小米电视4A 32英寸</h3>
                            <p>64位四核处理器 / 1GB+4GB大内存</p>
                            <span>499元</span>
                            <div class="current">
                                <h3>很满意，很开心，很幸福</h3>
                                <p>来自童童的评价</p>
                            </div>
                             <div class="newGood">
                                 <h4>促销</h4>
                             </div>
                        </li>
                        <li>
                            <img src="images/center-electrical-top-center-right-top04.jpg">
                            <h3>小米电视4A 32英寸</h3>
                            <p>64位四核处理器 / 1GB+4GB大内存</p>
                            <span>499元</span>
                            <div class="current">
                                <h3>很满意，很开心，很幸福</h3>
                                <p>来自童童的评价</p>
                            </div>
                            <div class="newGood">
                                <h4>促销</h4>
                            </div>
                        </li>

                    </ul>
                </div>
                <div class="center-electrical-top-center-posright-buttom">
                    <ul>
                        <li>
                            <img src="images/center-electrical-top-center-right-top03.jpg">
                            <h3>小米电视4A 32英寸</h3>
                            <p>64位四核处理器 / 1GB+4GB大内存</p>
                            <span>499元</span>
                            <div class="current">
                                <h3>很满意，很开心，很幸福</h3>
                                <p>来自童童的评价</p>
                            </div>
                        </li>
                        <li>
                            <img src="images/center-electrical-top-center-right-top05.jpg">
                            <h3>小米电视4A 32英寸</h3>
                            <p>64位四核处理器 / 1GB+4GB大内存</p>
                            <span>499元</span>
                            <div class="current">
                                <h3>很满意，很开心，很幸福</h3>
                                <p>来自童童的评价</p>
                            </div>
                            <div class="newGood">
                                <h4>促销</h4>
                            </div>
                        </li>
                        <li>
                            <img src="images/center-electrical-top-center-right-top07.jpg">
                            <h3>小米电视4A 32英寸</h3>
                            <p>64位四核处理器 / 1GB+4GB大内存</p>
                            <span>499元</span>
                            <div class="current">
                                <h3>很满意，很开心，很幸福</h3>
                                <p>来自童童的评价</p>
                            </div>
                        </li>
                        <li>
                            <img src="images/center-electrical-top-center-right-top06.jpg">
                            <h3>小米电视4A 32英寸</h3>
                            <p>64位四核处理器 / 1GB+4GB大内存</p>
                            <span>499元</span>
                            <div class="current">
                                <h3>很满意，很开心，很幸福</h3>
                                <p>来自童童的评价</p>
                            </div>
                            <div class="newGood">
                                <h4>促销</h4>
                            </div>
                        </li>

                    </ul>
                </div>

            </div>

        </div>
        <div class="center-electrical-top-bottom">
                <img src="images/center-electrical-top-center-top.jpg">
        </div>
    </div>
    <div class="center-video w">
        <div class="center-video-top clearfix">
            <div class="center-video-left">
                <h1>手机</h1>
            </div>
            <div class="center-video-right">
                <a href="#">查看全部<i>&nbsp; </i></a>
            </div>
        </div>
        <div class="center-video-buttom">
            <ul>
                <li>
                    <img src="images/center-video-buttom01.jpg">
                    <h3>王源 & 小米9 全新广告大片</h3>
                    <p>好看又能打！我反正被帅到了，Will You？</p>
                </li>
                <li>
                    <img src="images/center-video-buttom02.jpg">
                    <h3>王源 & 小米9 全新广告大片</h3>
                    <p>好看又能打！我反正被帅到了，Will You？</p>
                </li>
                <li>
                    <img src="images/center-video-buttom03.jpg">
                    <h3>王源 & 小米9 全新广告大片</h3>
                    <p>好看又能打！我反正被帅到了，Will You？</p>
                </li>
                <li>
                    <img src="images/center-video-buttom04.jpg">
                    <h3>王源 & 小米9 全新广告大片</h3>
                    <p>好看又能打！我反正被帅到了，Will You？</p>
                </li>


            </ul>
        </div>
    </div>
</div>

<!--底部-->
<div class="bottom">
    <div class="bottom-up">
        <div class="w">
            <div class="bottom-up-up">
                <ul>
                    <li><a href="#"><i> </i> 预约维修服务</a></li>
                    <li><a href="#"><i> </i> 7天无理由退货</a></li>
                    <li><a href="#"><i> </i> 15天免费换货</a></li>
                    <li><a href="#"><i> </i> 满150元包邮</a></li>
                    <li class="button-last"><a href="#"><i> </i> 520毛家网点</a></li>

                </ul>
            </div>
            <div class="bottom-up-down">
                <dl>
                    <dt>山之南兮</dt>
                    <dd><a href="#">简兮简兮</a></dd>
                    <dd><a href="#">方将万舞</a></dd>
                    <dd><a href="#">日之方中</a></dd>
                </dl>
                <dl>
                    <dt>惶惶不可为</dt>
                    <dd><a href="#">在前上处</a></dd>
                    <dd><a href="#">硕人俣俣</a></dd>
                    <dd><a href="#">公庭万舞</a></dd>
                </dl>
                <dl>
                    <dt>终不见兮</dt>
                    <dd><a href="#">有力如虎</a></dd>
                    <dd><a href="#">执辔如组</a></dd>
                    <dd><a href="#">生活旅行</a></dd>
                </dl>
                <dl>
                    <dt>水趟东西</dt>
                    <dd><a href="#">左手执龠</a></dd>
                    <dd><a href="#">右手秉翟</a></dd>
                    <dd><a href="#">赫如渥赭</a></dd>
                </dl>
                <dl>
                    <dt>何日依依</dt>
                    <dd><a href="#">公言锡爵</a></dd>
                    <dd><a href="#">山有榛</a></dd>
                    <dd><a href="#">隰有苓</a></dd>
                </dl>
                <dl>
                    <dt>君顾百思矣！</dt>
                    <dd><a href="#">云谁之思？</a></dd>
                    <dd><a href="#">西方美人</a></dd>
                    <dd><a href="#">彼思人兮</a></dd>
                </dl>
                <div class="bottom-up-down-left">
                    <p>400-100-5678</p>
                    <span> 周一至周日 8:00-18:00<br/>（仅收市话费）<br/></span>
                    <a href="#"><i> </i>联系客服</a>
                </div>
            </div>
        </div>
        <div class="bottom-down">
            <div class="w">
                <div class="bottom-down-info-footer">
                    <h1><a href="#">小米</a></h1>
                </div>
                <div class="bottom-down-info-footer-left">
                    <ul>
                        <li>小米官网 |</li>
                        <li>小米官网 |</li>
                        <li>小米官网 |</li>
                        <li>小米官网 |</li>
                        <li>小米官网 |</li>
                        <li>小米官网 |</li>
                        <li>小米官网 |</li>
                        <li>小米官网 |</li>
                        <li>小米官网 |</li>
                        <li>小米官网 |</li>
                    </ul>
                    <br/>
                    <p>
                        ©<a href="#">mi.com</a> 京ICP证110507号<a href="#">京ICP备10046444号</a><a href="#">京公网安备11010802020134号 </a><a
                            href="#">京网文[2017]1530-131号</a><br/>
                        <a href="#">（京）网械平台备字（2018）第00005号</a><a href="#">互联网药品信息服务资格证 (京) -非经营性-2014-0090</a><a
                            href="#">营业执照</a><a href="#">医疗器械公告</a><br/>
                        <a href="#">增值电信业务许可证</a>&nbsp;网络食品经营备案（京）【2018】WLSPJYBAHF-12 &nbsp;<a href="#">食品经营许可证</a><br/>
                        违法和不良信息举报电话：185-0130-1238<a href="#">违法和不良信息举报电话：185-0130-1238 </a> 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                    </p>
                    <div class="bottom-pic">
                        <ul>
                            <li><a href=""><img src="images/truste%20.png"></a></li>
                            <li><a href=""><img src="images/1.png"></a></li>
                            <li><a href=""><img src="images/2.png"></a></li>
                            <li><a href=""><img src="images/3.png"></a></li>
                            <li><a href=""><img src="images/4.png"></a></li>

                        </ul>
                    </div>
                </div>
                <div class="slogan">探索黑科技，小米为发烧而生</div>
            </div>
        </div>
    </div>
</div>

<div class="flex">
    <ul>
         <li>
           <img src="images/fix/phone.png">
           <h3>手机APP</h3>
       </li>
         <li>
           <img src="images/fix/people.png">
           <h3>个人中心</h3>
       </li>
         <li>
           <img src="images/fix/phone.png">
           <h3>售后服务</h3>
       </li>
         <li>
           <img src="images/fix/phone.png">
           <h3>联系客服</h3>
       </li>
         <li>
           <img src="images/fix/totop.png">
           <h3>购物车</h3>
       </li>
    </ul>
</div>
</body>
</html>